<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>xbren</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }

        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <label for="todo">TODO</label>
    <input id="todo" v-model="message">
    <p>{{message}}</p>
    <p>{{message.split('').reverse().join('')}}</p>
    <a v-bind:href="url">百度一下</a>
    <div>
        <label for="flag-switch">开关</label>
        <select v-model="flag" id="flag-switch">
            <option value="0">关</option>
            <option value="1">开</option>
        </select>
        <p v-show="flag === '1'">show:现在你看到我了</p>
        <p v-if="flag === '1'">if:现在你看到我了</p>
        <div>
            <ol>
                <li v-for="user in users">
                    {{user.name}}
                </li>
            </ol>
        </div>
        <div class="static"
             v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }">
        </div>
        <button v-on:click="counter += 1">增加 1</button>
        <p>这个按钮被点击了 {{ counter }} 次。</p>

        <p>单个复选框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>

        <p>多个复选框：</p>
        <!--<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <label for="runoob">Runoob</label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">taobao</label>-->
        <multi-checkbox v-on:mychange='changeValues' v-for="option in checkedOptions"
                        v-bind:id="option.id" v-bind:value="option.value" v-bind:label='option.label'
                        v-bind:checked="checkedNames.indexOf(option.value) >-1"></multi-checkbox>
        <br>
        <p>选中值为：{{checkedNames.join(",")}}</p>

        <div v-for="student in students">
            {{ student }}
        </div>

    </div>

</div>

<script>
    Vue.component('multi-checkbox', {
        props: ['id', 'value', 'label', 'checked'],
        template: '<div><input type="checkbox" v-on:change="changHandler" v-bind:id="id" v-bind:value="value" v-model:checked="checked"><label v-bind:for="id">{{label}}</label></div>',
        data: function () {
            return {
                value: this.value
            }
        },
        methods: {
            changHandler: function () {
                console.log(this.checked)
                //这里触发必须是小写，大写不行
                this.$emit('mychange', {checked: this.checked, value: this.value})
            }
        }
    })
    axios.defaults.baseURL = 'https://xbren.atomgit.net';
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello World!',
            url: "https://www.baidu.com",
            flag: false,
            users: [
                {name: "张三"},
                {name: "李四"},
                {name: "王五"}
            ],
            isActive: true,
            hasError: false,
            counter: 0,
            checked: false,
            checkedOptions: [
                {id: "runoob", value: "Runoob", label: "Runoob"},
                {id: "google", value: "Google", label: "Google "},
                {id: "taobao", value: "Taobao", label: "Taobao"}
            ],
            checkedNames: ['Google'],
            students: []
        },
        methods: {
            changeValues: function (data) {
                console.log('==================>', data)
                if (data.checked) {
                    if (this.checkedNames.indexOf(data.value) < 0) {
                        this.checkedNames.push(data.value)
                    }
                } else {
                    if (this.checkedNames.indexOf(data.value) >= 0) {
                        this.checkedNames.splice(this.checkedNames.indexOf(data.value), 1)
                    }
                }
            }
        },
        mounted() {
            axios.get('/classHelper/student.json')
                .then(response => {
                    this.students = response.data
                })
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    })
</script>
</body>
</html>